<template>
    
  <el-card>
    <el-space style="width: 100%; justify-content: flex-end">
      <el-space>
          <el-button type="primary" @click="updateTw(true, {})">新增</el-button>
      </el-space>
  </el-space>
  </el-card>
  <el-table
    v-loading="state.oneDataListLoading"
    :data="state.oneTableData"
    stripe
    border
    highlight-current-row
    style="width: 100%"
  >
    <el-table-column type="index" label="序号" width="55" header-align="center" align="center"/>
    <el-table-column prop="standardName" label="标准名称" header-align="center" align="center"/>
    <el-table-column prop="standardNumber" label="标准编号" header-align="center" align="center"/>
    <el-table-column prop="remark" label="备注" header-align="center" align="center"/>
    <el-table-column prop="" label="操作" width="150" header-align="center" align="center">
      <template #default="scope">
        <el-icon :size="16" color="#1491FF" title="编辑" style="cursor: pointer; margin: 0 6px" @click="updateTw(false, scope.row)">
          <Edit />
        </el-icon>
        <el-icon :size="16" color="#fe6360" title="删除" style="cursor: pointer; margin: 0 6px" @click="deleitem(scope.row.id)">
          <Delete />
        </el-icon>
      </template>
    </el-table-column>
  </el-table>
  <div style="padding-bottom: 15px;">
    <el-pagination :current-page="state.onePageNum" :page-sizes="state.onePageSizes" :page-size="state.onePageSize"
      :total="state.oneTotal" layout="total, sizes, prev, pager, next, jumper" @size-change="oneSizeChangeHandle"
      @current-change="oneCurrentChangeHandle">
    </el-pagination>
  </div>

  <cmDialog
    v-model="dialogOneVisible"
    :modal-title="state.titleFlag"
    :before-close="addOrdelCancel"
    model-width="30%"
  >
    <el-form :model="state.oneForm" ref="yybzFormRef" :rules="rules">
      <el-form-item label="标准名称" label-width="100px" prop="standardName">
        <el-input v-model="state.oneForm.standardName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="标准编号" label-width="100px" prop="standardNumber">
        <el-input v-model="state.oneForm.standardNumber" autocomplete="off" />
      </el-form-item>
      <el-form-item label="备注" label-width="100px">
        <el-input v-model="state.oneForm.remark" type="textarea"  />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-foot" style="padding-bottom: 20px;padding-right: 20px;">
        <el-button type="primary" @click="addOrdelSum(yybzFormRef)">
          提交
        </el-button>
        <el-button @click="addOrdelCancel">关闭</el-button>
      </div>
    </template>
  </cmDialog>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, watch, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import cmDialog from '@/components/cm-dialog/index.vue'
import type { FormInstance, FormRules } from 'element-plus'

import {  referenceListApi, referenceUpdateApi, referenceDelApi } from '@/api/standard/maintenance/index'

const state = reactive({
  oneTableData: [],
  oneDataListLoading: false,
  onePageNum: 1,
  onePageSize: 10,
  oneTotal: 1,
  onePageSizes: [10, 20],

  oneForm: {
    systemId: "",
    standardName: "",
    standardNumber: "",
    remark: "",
  },
  titleFlag: "",
})
const props = defineProps({
  datainfo: { // 编制申报传递参数id、列表编辑id  对象
    type: Object,
    default: () => ({})
  }
})
  // 获取数据
const inityybz = async () => {
  state.oneForm.systemId = props.datainfo.id
  var params = {
    systemId: props.datainfo.id
  }
  state.oneDataListLoading = true
  await referenceListApi(params).then(res => {  // 主编单位list
    state.oneTableData = res.data.list
    state.oneDataListLoading = false
    state.onePageNum = res.data.pageNum
    state.onePageSize = res.data.pageSize
    state.oneTotal = res.data.total
    // console.log("主编单位：", state.oneTableData)
  })
}
const dialogOneVisible = ref(false)
// 表单验证
// const mobileRegExp = /^1[3456789]\d{9}$/
// const telValidator = (rule, value, callback) => {
//     if (mobileRegExp.test(value)) {
//     callback()
//   } else {
//     callback(new Error('手机号格式不正确'))
//   }
// };
interface RuleForm {
  id: string | Number,
  systemId: string | Number,
  standardName: string,
  standardNumber: string,
  remark: string,
}
const yybzFormRef = ref<FormInstance>()
const rules = reactive<FormRules<RuleForm>>({
  standardName: [{ required: true, message: '请输入标准名称', trigger: 'blur' }],
  standardNumber: {required: true, message: '请输入标准编号',trigger: ['blur', 'change']},
})

const updateTw = (isUpdate: Boolean, row: any) => {
  state.titleFlag = isUpdate ? "引用标准新增" : "引用标准编辑"
  if(!isUpdate) {
    state.oneForm = {...row}
  }
  dialogOneVisible.value = true
}

const deleitem = (id: String|Number) => {
    ElMessageBox.confirm('确定要删除吗？', '删除', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      delMethods(id)
    })
}
const delMethods = async (id: Number|String) => {
  var params = {
    id: id
  }
  await referenceDelApi(params).then(res => {  // 主编单位list
    ElMessage.success({
      message: '操作成功',
      duration: 500,
    })
    addOrdelCancel()
    inityybz()
  })
}
const oneSizeChangeHandle = () => { }
const oneCurrentChangeHandle = () => { }
// 提交数据
const addOrdelSum = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      submitone()
    } else {
      console.log('提交错误', fields)
    }
  })
}

const submitone = async () => {
  await referenceUpdateApi(state.oneForm).then(res => {  // 主编单位list
      ElMessage.success({
        message: '操作成功',
        duration: 500,
      })
      addOrdelCancel()
      inityybz()
  })
}

const addOrdelCancel = () =>{
  yybzFormRef.value?.resetFields(); // 表单验证关闭
  dialogOneVisible.value = false
  state.oneForm = {
    systemId: "",
    standardName: "",
    standardNumber: "",
    remark: "",
  }
}

defineExpose({
  inityybz,
})

</script>
